import React, { useState } from "react";

type ChangeEvent = React.ChangeEvent<HTMLInputElement>;

const FormName = () => {
	const [firstName, setFirstName] = useState("");
	const [lastName, setLastName] = useState("");

	const fullName  = firstName + " " + lastName;

	const handleFirstNameChange = (e : ChangeEvent) => {
		setFirstName(e.target.value);
	};

	const handleLastNameChange = (e :ChangeEvent) => {
		setLastName(e.target.value);
	};

	return (
		<>
			<h2>Let’s check you in</h2>
			<label>
				First name:{' '}
				<input
					value={firstName}
					onChange={handleFirstNameChange}
				/>
			</label>
			<label>
				Last name:{' '}
				<input
					value={lastName}
					onChange={handleLastNameChange}
				/>
			</label>
			<p>
				Your ticket will be issued to: <b>{fullName}</b>
			</p>
		</>
	);


};

export default FormName;